<template>
  <div class="nav-box">
    <el-container>
      <el-aside width="15%">
        <el-menu
          router
          :default-active="defauletActive"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          @open="handleOpen"
          @close="handleClose"
          text-color="#fff"
          active-text-color="#7fdbfd"
        >
          <template v-for="(item, index) in navMenu">
            <el-menu-item :index="item.path" :key="index">
              <i :class="item.icon" class="icon"></i>
              {{ item.title }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import '@/assets/css/asideBar.less'
export default {
  name: "PersonalResources", //个人资源
  data() {
    return {
      defauletActive: "",
      navMenu: [
        {
          title: "实时录制",
          path: "/personalResources/realTimeRecording",
          icon: "icon-luxiangzhibo iconfont fs",
        },
        {
          title: "实时转码",
          path: "/personalResources/transcoding",
          icon: "icon-luxianghuifang iconfont fs",
        },
        {
          title: "媒体文件",
          path: "/personalResources/mediumFile",
          icon: "icon-wendang iconfont fs",
        },
        {
          title: "文档资源",
          path: "/personalResources/documentFile",
          icon: "icon-wendang2 iconfont fs",
        },
        {
          title: "图片资源",
          path: "/personalResources/imageFile",
          icon: "icon-tupian iconfont fs",
        },
        {
          title: "回收站",
          path: "/personalResources/recycleBin",
          icon: "icon-lajitong1 iconfont fs",
        },
        {
          title: "收藏夹",
          path: "/personalResources/favorite",
          icon: "icon-shoucang iconfont fs",
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    changeRouter() {
      this.defauletActive = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
    },
  },
  watch: {
    $route() {
      this.changeRouter();
    },
  },
  created() {
    this.changeRouter();
  },
};
</script>

<style lang='less' scoped>
.icon {
    color: inherit;
}

.fs {
    font-size: 0.27rem !important;
    margin-bottom: 3px !important;
    margin-right: 0.01rem !important;
}
</style>
